<template>
  <view class="su-fixed-footer-icon" @click="clickHandler" :class="{active}">
    <view class="su-fixed-footer-icon__icon">
      <text :class="['iconfont',icon]"></text>
    </view>
    <view class="su-fixed-footer-icon__label">
      {{label}}
    </view>
  </view>
</template>

<script>
  export default {
    name: "su-fixed-footer",
    props: {
      // 是否开启底部安全区适配
      label: {
        type: String,
        default: '标签'
      },
      icon:{
        type:String,
        default:'icon-shoucang'
      },
      active:{
        type:Boolean,
        default:false
      }
    },
    data() {
      return {

      };
    },
    methods:{
      clickHandler(){
        this.$emit('click')
      }
    }
  }
</script>

<style lang="scss">
  .su-fixed-footer-icon {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 120upx;
    &:active{
      opacity: 0.6;
    }
    &.active{
      .su-fixed-footer-icon__icon{
        .iconfont{
          color: $u-primary;
        }
      }
      .su-fixed-footer-icon__label{
        color: $u-primary;
      }
    }
    &__icon{
      color: #999;
      .iconfont{
        font-size: 44upx;
      }
    }
    &__label{
      font-size: 24upx;
      color: #999;
      margin-top: 4upx;
    }
  }
</style>
